/* This is the external style sheet for the third page - map*/
body {
	background-color: black;
}
/* Header element*/
h1 {
 text-align: center;
 color: white;
 font-weight: bold;
 font-family: Helvetica, Arial, sans-serif;
}
h2 {
	text-align: center;
	color: white;
	font-family: Helvetica, Arial, sans-serif;
}
h3 {
	text-aligh: center;
	color: white;
	/* background-color: rgb(0, 0, 0, 0.4); this is a grey background*/
	background-color: transparent;
	font-size: 85%;
	font-family: Helvetica, Arial, sans-serif;
}

h4 {
	text-align: left;
	color: white;
	font-weight: bold;
	font-size: 130%;
	/* text-decoration: underline; */
	font-family: Helvetica, Arial, sans-serif;
}


h5 {
	text-aligh: center;
	color: black;
	font-weight: bold;
	font-family: Helvetica, Arial, sans-serif;
}

/* Paragraph element*/
p {
 text-align: center;
 color: white;
 font-weight: bold;
 font-family: Helvetica, Arial, sans-serif;
 font-size: 90%;
 background-color: rgb(0, 0, 0, 0.4);
}

/* style the nav bar */
#navbar {
  overflow: hidden;
  background-color: #6c757d;
}

/* style the links */
#navbar a {
  float: right;
  display: inline-block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
  font-size: 17px;
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}

#navbar a.active {
  background-color: #383838;
  color: white;
}

/* page content */
.content {
  padding: 16px;
}

/* sticky class is added to the navbar with js when reaches position */
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

/* some top padding to the page content to prevent sudden quick movement (as the nav bar gets a new position at the top page (position fixed and top is 0) */
.sticky + .content {
  padding-top: 60px;
}

/* link color in footer*/
a:link {
  color: white;
  text-decoration: none;
}

a:visited {
  color: white;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}

/* images changes width with the screen */
.responsive {
  width: 100%;
  height: auto;
}

img {
	/* Gray border */
  border: 0.5px solid #000000; 
  /* Rounded border */
  border-radius: 4px;  
  /* Some padding */
  padding: 1px; 
  /* Set a small width */
  width: 100%; 
}

/* Add a hover effect (grey shadow) */
img:hover {
  box-shadow: 0 0 2px 1px rgba(199, 198, 205, 1);
}